<template>
    <div class='root' @click='openLive'>
        <img :src="room.room_src" alt="">
        <h6><span class='fa fa-desktop'></span> {{room.room_name}}</h6>
        <span class='nickname'>{{room.nickname}}</span>
        <span class='online fa fa-user'> {{room.online|numFormat}}</span>
    </div>
</template>

<script>    
export default {
    props:['room'],
    methods:{
        openLive:function(){
            window.open(this.room.url)
        }
    }
}
</script>

<style scoped>
.root{
    width: 14rem;
    height: 12rem; 
    position: relative;
}
img{
    width: 100%;
    border-radius: 1rem;
    height: 80%;
}
h6{
    margin: 0;
    height: 19%;
    padding: 0px 5px;
    line-height: 2.4rem;
    font-size: 1rem;
    /*文字...*/
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.nickname,.online{
    color:#ffffff;
    position: absolute;
    top:65%;
    text-shadow:0px 0px 2px black;/*技巧：给文字加阴影，白字黑色阴影*/
}
.nickname{
    left:1rem;
}
.online{
    right:1rem;
}
</style>
